/**
 * @Author  fangquan
 * @Purpose webpack配置
 */

const path = require("path");
const UglifyPlugin = require("uglifyjs-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const { config } = require("process");

/**
 * 需要npm或者yarn 安装两个第三方
 * npm i -D  uglifyjs-webpack-plugin compression-webpack-plugin
 */

/**
 * 设置路径别名
 */
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: "./", // 基本路径
  outputDir: "dist", // 输出文件目录
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  assetsDir: "static", // 放置生成的静态资源 （js、css、img、fonts）的（相对于  outputDir）的目录
  pages: undefined, // 以多页模式构建应用程序
  runtimeCompiler: false, //  是否使用包含运行时编辑器的 vue 构建版本
  // 是否为 babel 或 ts 使用  thread-loader 该选项在该系统的 CPU 有多于一个内核时自动启用， 仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require("os").cpus().length > 1,
  productionSourceMap: false, // 生成环境是否生成 sourceMap 文件， 一般情况建议不打开

  // webpack 配置
  chainWebpack: config => {
    // 修改文件引入自定义路径
    config.resolve.alias
      .set('@', resolve('src'));

      // 项目启动提示
      console.log("项目正式启动!!!");

      // 禁止JS预加载
      config.plugins.delete("prefetch-index");
      config.plugins.delete('preload-index');
  },

  // 调整 webpack 配置
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {

      // 为生产环境修改配置
      config.mode = 'production';
      // 利用splitChunks将每个依赖包单独打包，在生产环境下配置
      // 开启gzip压缩

      config.plugins.push(new CompressionWebpackPlugin({
        algorithm:  'gzip',
        test: /\.ts$|\.html$|\.json$|\.css/,
        threshold:  10240,
        minRatio: 0.8
      }));

      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',

        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `${packageName.replace('@', '')}`
              }
            }
          }
        },

        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_console: true, // console
              drop_debugger: false,
              pure_funcs: ['console.log'] // 移除console
            }
          }
        })]
      };

      // 取消webpack警告的性能提示
      config.performance = {
        hints: 'warning',
        // 入口起点的最大体积
        maxEntrypointSize: 50000000,
        // 生产文件的最大体积
        maxAssetSize: 30000000,
        // 只给出 ts 文件的性能提示
        assetFilter: (assetFilename) => {
          return assetFilename.endsWith('.ts');
        }
      }
    } else {

      // 为开发环境修改配置...
      config.mode == 'development';

      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                return `${packageName.replace('@', '')}`
              }
            }
          }
        }
      }
    }
  },

  css: {
    // css预设器配置项
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/variable.scss";`
      }
    }
  },
  
  // 代理
  devServer: {
    port: 8100,
    https: false,
    open: true, // 配置自动启动浏览器
    hotOnly: true, // 热更新

    proxy: {
      // 配置自动启动浏览器
      '/': {
        target: 'http://dev.yatiku.com',
        changeOrigin: true,
        secure: false,
        // ws: true, //websocket支持
        pathRewrite: {
          "^/": ""
        }
      }
    }
  },

  pwa: {}, // PWA 插件相关配置

  // 第三方插件配置
  pluginOptions: {}

}